<template >
  <div>
      <div class="app-container">
      <!-- 表单 -->
     <div class='formPosition' style='left:0px;top:10px;width:100%;box-shadow:none;'>
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm ">
                    
                    <el-form-item  label="微信支付图片管理" >
                       <el-upload
                          action="https://njazd.com/car_api/api/imageUpload/imageUploadWxQRImg"
                          list-type="picture-card"
                          :data="{'operate':this.operateWX}"
                          :on-preview="handlePictureCardPreviewWeiXin"
                          :on-success="handleSuccessWeiXin"
                          :before-remove='beforeBefRemWeiXin'
                          :on-remove="handleRemoveWeiXin"
                          :on-exceed="exceedWeiXin"
                          :limit='3'
                           :file-list="listWeiXin"
                          >
                          <i class="el-icon-plus"></i>
                      </el-upload>
                      <el-dialog :visible.sync="dialogVisible">
                          <img width="100%" :src="dialogImageUrl" alt="">
                      </el-dialog>
                    </el-form-item>

                     <el-form-item style='margin-bottom:50px;'  label="微信支付当前使用的图片" >
                        <el-select  v-model='selestStatue' style='margin-top:20px;width:20%;' placeholder="请选择" class='select_roles' @change="changStatue(selestStatue)">
                              <el-option
                                v-for="item in optionsStatue"
                                :key="item.name"
                                :label="item.name"
                                :value="item.name">
                              </el-option>
                        </el-select>
                     </el-form-item>

                    <el-form-item  label="banner图管理" >
                      <el-upload
                          action="https://njazd.com/car_api/api/imageUpload/imageUploadBanners"
                          list-type="picture-card"
                          :data="{'operate':this.operate}"
                          :on-preview="handlePictureCardPreviewBanner"
                          :on-success="handleSuccessBanner"
                          :before-remove='beforeBefRemBanner'
                          :on-remove="handleRemoveBanner"
                          :file-list="listBanner"
                          
                          >
                          <i class="el-icon-plus"></i>
                      </el-upload>
                      <el-dialog :visible.sync="dialogVisible">
                          <img width="100%" :src="dialogImageUrl" alt="">
                      </el-dialog>
                    </el-form-item>
                    
                    <el-form-item  label="广告图管理" >
                      <el-upload
                          action="https://njazd.com/car_api/api/imageUpload/imageUploadAdvImg"
                          list-type="picture-card"
                          :data="{'operate':this.operateAD,'h5Url':this.linkAD}"
                          :on-preview="handlePictureCardPreviewAD"
                          :on-success="handleSuccessAD"
                          :before-remove='beforeBefRemAD'
                          :on-remove="handleRemoveAD"
                          :on-exceed="exceedAD"
                          :limit='2'
                          :file-list="listAD"
                          >
                          <i class="el-icon-plus"></i>
                      </el-upload>
                      <el-dialog :visible.sync="dialogVisible">
                          <img width="100%" :src="dialogImageUrl" alt="">
                      </el-dialog>
                    </el-form-item>
                    
                    <el-form-item v-if="listAD[0] != undefined" label="广告图1链接" >
                      <el-input v-model="listAD[0].bannerId" style='width:20%;margin-right:2%;display:none' readonly></el-input>
                        <el-input v-model="h5Url1" style='width:20%;margin-right:2%;'></el-input>
                        <el-button type="primary" @click="submitForm(listAD[0].bannerId,h5Url1)" >确定</el-button>
                    </el-form-item>
                    
                    <el-form-item v-if="listAD[1] != undefined " label="广告图2链接" >
                        <el-input v-model="listAD[1].bannerId" style='width:20%;margin-right:2%;display:none'></el-input>
                        <el-input v-model="h5Url2" style='width:20%;margin-right:2%;'></el-input>
                        <el-button type="primary" @click="submitForm(listAD[1].bannerId,h5Url2)" >确定</el-button>
                    </el-form-item>
                   
                   
          </el-form>
          </div>
         
  </div>
</div>
</template>


<script>
import { MessageBox } from 'element-ui';
import {delBanners ,getBanners ,getUploadWeiXin ,getWeiXin ,delWeiXin ,enableWeiXin ,getADList ,delADList ,modifyAD} from  '@/api/picture'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination'
export default {
  components: { Pagination },
  data() {
    return {
      selestStatue:'',
      optionsStatue:[],
      listBanner:[],
      listWeiXin:[],
      listAD:[],
      linkAD:'',
      operate:'',
      operateWX:'',
      operateAD:'',
      ADID:[],
      h5Url1:'',
      h5Url2:'',
      dialogImageUrl: '',
      dialogVisible: false,
      listLoading: true,
      ruleForm: {
          isShow:'',
          noticeId:'',
          notice:'',
          deliver:false
        },
      cleanForm:{
           isShow:'',
          noticeId:'',
          notice:'',
          deliver:false
      },
        rules: {
          notice: [
            { required: true, message: '请输入公告内容', trigger: 'blur' }
          ]
        }
    }
  },
  created() {
       this.getBannerData()
       this.getWeiXinData()
       this.getADData()
  },
  methods: {
    getBannerData() {
      this.listLoading = true
      const paramsData = {}
      getBanners(paramsData).then(res => {
          const datas = res.data;
          const Array =[]
          if(res.data){
            for(var i=0;i<datas.length;i++){
               const obj ={}
              obj.name =datas[i].title;
              obj.url =datas[i].imgUrl;
              obj.bannerId =datas[i].bannerId;
              Array.push(obj)
          }
          this.listBanner=Array;
          }
          this.listLoading = false
      })
    },
    getWeiXinData(){
        this.listLoading = true
        const paramsData = {}
        getWeiXin(paramsData).then(res => {
            const datas = res.data;
            const Array =[]
            if( res.data){
               for(var i=0;i<datas.length;i++){
                const obj ={}
                obj.isUseing =datas[i].isUseing;
                if(datas[i].isUseing == 1){//判断当前启用哪张图
                   this.selestStatue = datas[i].qrId
                }
                obj.name =datas[i].qrId;
                obj.url =datas[i].qrImg;
                
                Array.push(obj)
               }
               this.listWeiXin=Array;
              this.optionsStatue=Array;
            }
             this.listLoading = false
            
        })
    },
    getADData(){
       this.listLoading = true
        const paramsData = {}
        getADList(paramsData).then(res => {
          const datas = res.data;
          if(res.data){
             const Array =[]
             const ArrayId = []
          for(var i=0;i<datas.length;i++){
               const obj ={}
               const obj1 ={}
              obj.name =datas[i].h5Url;
              obj.url =datas[i].imgUrl;
              obj.bannerId =datas[i].advId;
              Array.push(obj)
              ArrayId.push(datas[i].advId);
          }
          this.listAD= Array;
          if(this.listAD[0]){
              this.h5Url1 = this.listAD[0].name
          }else{
               this.h5Url1 = ""
          }
          if(this.listAD[1]){
              this.h5Url2 = this.listAD[1].name
          }else{
               this.h5Url2 = ""
          }
         
          this.ADID = ArrayId;
          }
          this.listLoading = false
        })
    },
    submitForm(adId,adh5Url){//修改广告h5链接 imgId h5Url modifyAD
       const paramsData = {imgId:adId,h5Url:adh5Url}
       modifyAD(paramsData).then(res => {
          if(res.code==200){
               this.$notify({
                    message: '添加广告h5链接成功',
                    type: 'success',
                    duration: 2000
                })    
          }else{
              this.$notify({
                    message: '添加广告h5链接失败',
                    type: 'error',
                    duration: 2000
                }) 
          }
       })
       this.getADData()   
    },
    handleSuccessBanner(response, file, fileList){
          this.getBannerData()
    },
    handleSuccessWeiXin(response, file, fileList){
       this.getWeiXinData()
    },
    handleSuccessAD(response, file, fileList){
       this.getADData()
    },
    beforeBefRemBanner(file, fileList){
        this.operate = file.bannerId
    },
    beforeBefRemWeiXin(file, fileList){
       this.operateWX = file.name
    },
    beforeBefRemAD(file, fileList){
       this.operateAD = file.bannerId
    },
    handleRemoveBanner(file, fileList) {//删除   banner
       const paramsData = {imgId:this.operate}
        delBanners(paramsData).then(res => {
             if(res.code==200){
               this.$notify({
                    message: '删除成功',
                    type: 'success',
                    duration: 2000
                })    
          }else{
              this.$notify({
                    message: '删除失败',
                    type: 'error',
                    duration: 2000
                }) 
          }
        })
         this.getBannerData()
    },
    handleRemoveWeiXin(file, fileList) {//删除  微信
       const paramsData = {imgId:this.operateWX}
        delWeiXin(paramsData).then(res => {
              if(res.code==200){
               this.$notify({
                    message: '删除成功',
                    type: 'success',
                    duration: 2000
                })    
          }else{
              this.$notify({
                    message: '删除失败',
                    type: 'error',
                    duration: 2000
                }) 
          }
        })
        this.getWeiXinData()
    },
    handleRemoveAD(file, fileList) {//删除  广告
       const paramsData = {imgId:this.operateAD}
        delADList(paramsData).then(res => {
              if(res.code==200){
               this.$notify({
                    message: '删除成功',
                    type: 'success',
                    duration: 2000
                })    
          }else{
              this.$notify({
                    message: '删除失败',
                    type: 'error',
                    duration: 2000
                }) 
          }
        })
         this.getADData()
    },
    handlePictureCardPreviewBanner(file) { //回显  banner
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handlePictureCardPreviewWeiXin(file) {//回显  微信
      this.dialogImageUrl= file.url;
      this.dialogVisible = true;
    },
    handlePictureCardPreviewAD(file){//回显 广告
      this.dialogImageUrl= file.url;
      this.dialogVisible = true;
    },
    exceedWeiXin(){
       this.$notify({
                message: '微信支付图片最多上传三张',
                type: 'error',
                duration: 2000
            })
    },
    exceedAD(){
      this.$notify({
                message: '广告图片最多上传两张',
                type: 'error',
                duration: 2000
            })
    },
    changStatue(data){
        this.selestStatue =data
        const paramsData ={qrId:data}
        enableWeiXin(paramsData).then(res => {
              if(res.code == 200){
                  this.$notify({
                      message: '微信支付图片设置成功',
                      type: 'success',
                      duration: 2000
                  })
              }else{
                this.$notify({
                      message: '微信支付图片设置失败',
                      type: 'error',
                      duration: 2000
                  })
              }
                
          })
        
    }
   
  }

  
 }
</script>
<style lang="scss">
 .filter-container{
   margin-bottom:20px;
 }
 .el-date-range-picker{
   margin-left:25%;
 }
 .inp_search{
   width:20%;
   margin-right:1%;        
 }
 .formPosition{
    width:100%;
    height:auto;
    position: absolute;
    left: 0%;
    top: 10px;
    z-index: 999;
    background:#fff;
 }
 .el-dialog__wrapper{
   z-index:99;
 }
 .el-upload-list--picture-card 
 .el-upload-list__item-name{
   display:block;
   font-size:14px;
   margin-top:0px;
   position:fixed;
   z-index:90;
 }
 
 .demo-ruleForm{
      width:90%;     
 }
 .titleForm{
     width:100%;
     height:30px;
     line-height:30px;
     margin-bottom:20px;
     font-size:1.1em;
     font-weight: 500;
 }
 .left_titleForm{
    float:left;
 }
 .right_titleForm{
    display:block;
    float:right;
 }
 .select_roles{
    width:100%;
 }
 
</style>
